import {createApp} from 'vue'
import 'uno.css'
import './style.css'
import App from './App.vue'
// 路由
import router from "@/router/index.js"
// 状态管理
import {createPinia} from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import {VueQueryPlugin, QueryClient} from '@tanstack/vue-query'
// 权限
import permissionDirective from "@/directives/permission";

// 创建 QueryClient
const queryClient = new QueryClient()

// 只在开发环境注册 Vue Query Devtools
if (import.meta.env.MODE === 'development') {
    import('@tanstack/vue-query-devtools')
        .then((module) => {
            const {VueQueryDevtools} = module
            app.component('VueQueryDevtools', VueQueryDevtools)
        })
}

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
// 注册全局指令
app.directive("permission", permissionDirective);

app.use(router)
app.use(pinia)
// 注册 Vue Query 插件
app.use(VueQueryPlugin, {queryClient})
app.mount('#app')
